<style>
    .fade-wrapper {
        width: 500px;
        height: 300px;
        position: relative;
        margin: 100px auto;
    }
    
    .fade-wrapper ul {
        height: 100%;
        width: 100%;
        position: relative;
    }
    
    .fade-wrapper ul>li {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        font-size: 100px;
        font-weight: bold;
        line-height: 300px;
        text-align: center;
        color: #fff;
        display: none;
    }
    
    .fade-wrapper ul>li:nth-child(1) {
        display: block;
    }
    
    .fade-wrapper ol {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
    }
    
    .fade-wrapper ol>li {
        float: left;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-left: 10px;
        background-color: purple;
        cursor: pointer;
    }
    
    .fade-wrapper ol>li.on {
        background-color: pink;
    }
    
    .fade-wrapper ul>li:nth-child(1) {
        z-index: 1;
    }
    
    .fade-wrapper .nav {
        position: absolute;
        height: 50px;
        width: 50px;
        background-color: #000;
        cursor: pointer;
        top: 50%;
        left: 0;
        margin-top: -25px;
        z-index: 2;
    }
    
    .fade-wrapper .right-nav {
        right: 0;
        left: auto;
    }
</style>
<div class="fade-wrapper">
    <ul class="content">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ol class="nav-icon-wrapper">
        <li class="on"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <div class="">
        <div class="nav left-nav"></div>
        <div class="nav right-nav"></div>
    </div>
</div>

<script src="/common/jquery.js"></script>
<script>
    let timer = null;

    function init() {
        addColor()
        initEvent()
        runAuto()
    }

    function runAuto() {
        timer = setInterval(function() {
            $('.right-nav').trigger('click');
        }, 1000)
    }

    $('.fade-wrapper').hover(function() {
        clearInterval(timer)

    }, function() {
        runAuto()
    })


    function initEvent() {
        $('.fade-wrapper ol').on('click', 'li', onNavClick)
        $('.fade-wrapper .nav').on('click', onArrowClick)
    }

    function onArrowClick() {
        let $this = $(this)
        let index = $('.fade-wrapper ol>li.on').index()

        if ($this.hasClass('.fade-wrapper left-nav')) {
            index = index < 0 ? $('.fade-wrapper ol>li').length - 1 : --index;
        } else {
            index = ++index % $('.fade-wrapper ol>li').length;
        }

        $('.fade-wrapper ol>li')
            .eq(index)
            .addClass('on')
            .siblings('.on')
            .removeClass('on');
        showTarget(index)

    }

    function showTarget(index) {
        $('.fade-wrapper ul>li')
            .eq(index)
            .fadeIn(800)
            .siblings(':visible')
            .fadeOut(800, function() {
                console.log('进入了');
            })
    }

    function onNavClick() {
        let $this = $(this);
        let index = $this.index()
        $this
            .addClass('on')
            .siblings('.on')
            .removeClass('on')
        showTarget(index)
    }

    function addColor() {
        $('.fade-wrapper ul>li').each(function(index, item) {
            let $this = $(this);
            let num = Math.floor(Math.random() * 360);
            $this.css('backgroundColor', `hsl(${num},50%,50%)`)
        })
    }

    init()
</script>